<template>
  <div class="install">
    <div>
      <span class="font600">{{$t('Install_name')}}</span>
      <el-input  class="nameinp" onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" :placeholder="$t('Install_nameTips')" v-model="container_name"> </el-input>
    </div>
    <div class="margin10">
     <span class="font600"> {{$t('Install_network')}}</span>
      <el-select v-model="network_mode"  :placeholder="$t('Install_networkTips')">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
    </div>
    <div class="margin20">
        <span class="font600">{{$t('Intsall_port')}}</span>
        <el-button @click="addPort" class="btnsize margin10" type="primary" size="small">{{ $t('Install_Add') }}</el-button>
    </div>
    <div class="margin20" v-for="(item,index) in port" :key="'port_protocols'+index">
        <div class="flex_r">
          <div>
            <el-input :placeholder="$t('Install_cPortTips')" class="input" v-model="item.container_ports">
                <template slot="prepend">{{$t('Install_cPort')}}</template>
            </el-input>
        </div>
        <div class="marginl40">
            <el-input :placeholder="$t('Install_hPortTips')" class="input" v-model="item.host_ports">
                <template slot="prepend">{{$t('Install_hPort')}}</template>
            </el-input>
        </div>
        <div class="marginl40 flex_r">
            <el-radio-group v-model="item.port_protocols">
                <el-radio-button label="tcp"></el-radio-button>
                <el-radio-button label="udp"></el-radio-button>
            </el-radio-group>
            <div class="marginl10">
                <el-button @click="delPort(index)"  type="danger" >{{ $t('Install_Del') }}</el-button>
            </div>
        </div>
        </div>
    </div>
    <div class="margin20">
        <span class="font600">{{$t('Install_file')}}</span>
        <el-button @click="addFile" class="btnsize" type="primary" size="small">{{ $t('Install_Add') }}</el-button>
    </div>
    <div v-for="(item,index) in file" :key="'file'+index" class=" margin20">
        <div class="flex_r">
          <div>
            <el-input :placeholder="$t('Install_cFileTips')" class="input" v-model="item.container_volumes">
                <template slot="prepend">{{$t('Install_cFile')}}</template>
            </el-input>
        </div>
        <div class="marginl40">
            <el-input :placeholder="$t('Install_hFileTips')" class="input" v-model="item.host_volumes">
                <template slot="prepend">{{$t('Install_hFile')}}</template>
            </el-input>
        </div>
        <div class="marginl40 flex_r">
            <div class="marginl10">
                <el-button @click="delFile(index)"  type="danger" >{{ $t('Install_Del') }}</el-button>
            </div>
        </div>
        </div>
    </div>
    <div class="margin20">
        <span class="font600">{{ $t('Install_env') }}</span>
        <el-button @click="addEnv" class="btnsize" type="primary" size="small">{{ $t('Install_Add') }}</el-button>
    </div>
    <div v-for="(item,index) in envList" :key="'env'+index" class=" margin20">
        <div class="flex_r">
          <div>
            <el-input :placeholder="$t('Install_kEnvTips')" class="input" v-model="item.key">
                <template slot="prepend">{{ $t('Install_kEnv') }}</template>
            </el-input>
        </div>
        <div class="marginl40">
            <el-input :placeholder="$t('Install_vEnvTips')" class="input" v-model="item.value">
                <template slot="prepend">{{ $t('Install_vEnv') }}</template>
            </el-input>
        </div>
        <div class="marginl40 flex_r">
            <div class="marginl10">
                <el-button @click="delEnv(index)"  type="danger" >{{ $t('Install_Del') }}</el-button>
            </div>
        </div>
        </div>
    </div>
    <div v-if="Description" class="tips margin40">{{Description}}</div>
    <div class="margin40">
        <el-button class="btnsize" @click="sub" type="primary" size="medium">{{ $t('Install_sub') }}</el-button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Button, Input, RadioGroup, RadioButton } from "element-ui";
import http from '@/utils/http'
import fast, {url} from '@/utils/store'
Vue.use(Button);
Vue.use(Input);
Vue.use(RadioGroup);
Vue.use(RadioButton);
export default {
  data() {
    return {
      info: [],
      radio2: '不映射',
      Description: '',
      options: [
        {
          value: "桥接",
          label: "bridge",
        },
        {
          value: "没有网络",
          label: "none",
        },
        {
          value: "跟随宿主主机",
          label: "host",
        }
      ],
      name: '',
      image_name:'',//镜像名
      container_name:'',//容器名
      network_mode:'bridge',//网络模式
      port:[
        {
          container_ports:'',
          host_ports: '',
          port_protocols:'tcp',

        }
      ], //端口映射 port_protocols  container_ports host_ports
      file:[
        {
          container_volumes:'',
          host_volumes:'',
        }
      ],// 文件映射
      envList: []
    };
  },
  computed:{
    env(){
      let arr = [];
      this.envList.forEach(item=>{
        arr.push(`${item.key}=${item.value}`)
      })
      return arr;
    }
  },
  mounted(){
    let name = this.$route.query.image;
    if(!name)return this.$router.back();
    this.name = name;
    this.searchData(this.name)
  },
  methods:{
    getData(data){
        http.post(fast.appstore,data).then(res=>{
          let data = res.Data,
          info =  data ? data[0] : {}
          let ContainerPort = info.ContainerPort || [],HostPort = info.HostPort, ContainerVolume = info.ContainerVolume || [],HostVolume = info.HostVolume,PortProtocol = info.PortProtocol;
          this.Description= info.Description;
          this.network_mode = info.NetWork;
          info.Env.forEach(item=>{
            this.envList.push({
              key: item.split('=')[0],
              value: item.split('=')[1],
            })
          })
          this.image_name = info.Image;
          let port = [],file = [];
          ContainerPort.forEach((item,index)=>{
              port[index] = {
                'container_ports' : item,
                'host_ports': HostPort[index],
                'port_protocols': PortProtocol[index]

              }
          })
          ContainerVolume.forEach((item,index) => {
            file[index] = {
              'container_volumes': item,
              'host_volumes': HostVolume[index]
            }
          })
          this.port = port;
          this.file = file;
        })
    },
    searchData(value){
        this.getData({
            name: value,
            search_type: 'exact'
        })
    },
    addPort(){
      this.port.push(
        {
          container_ports:'',
          host_ports: '',
          port_protocols:'tcp',

        }
      )
    },
    addEnv(){
      this.envList.push(
        {
          key: '',
          value: '',
        }
      )
    },
    addFile(){
      this.file.push(
        {
          container_volumes:'',
          host_volumes:'',
        }
      )
    },
    delPort(index){
      this.port.splice(index,1)
    },
    delFile(index){
      this.file.splice(index,1)
    },
    delEnv(index){
      this.envList.splice(index,1)
    },
    sub(){
      this.$debounce(this.submit,this)
    },
    submit(){
      let params = {
        "image_name": this.image_name,//镜像名
        "container_name": this.container_name,//容器名
        "network_mode": this.network_mode,//网络模式
        "container_ports": [],
        "host_ports": [],
        "port_protocols": [],
        "container_volumes": [],
        "host_volumes": [],
        "env": this.env
      }
      this.port.forEach((item,index) => {
        params['container_ports'][index] = String(item.container_ports)
        params['host_ports'][index] = String(item.host_ports)
        params['port_protocols'][index] = item.port_protocols
      })
      this.file.forEach((item,index) => {
        params['container_volumes'][index] = item.container_volumes
        params['host_volumes'][index] = item.host_volumes
      })
      params.array = true;
      let loadingInstance1 = this.$loading({ text: '安装中',background: 'rgba(0, 0, 0, 0.8)' });
      http.post('/containercreate',params).then(data=>{
        loadingInstance1.close();
        this.$message({
          showClose: true,
          message: data.msg || '操作成功',
          type: 'success'
        })
      }).catch(error=>{
        console.log(error)
        loadingInstance1.close();
      })
    }
  }
};
</script>
<style lang='scss' scoped>
.input{
  width: 400px;
}
.install{
  min-width: 1300px;
}
.font600{
    font-size: 16px;
    font-weight: 600;
}
.nameinp{
    width: 217px;
}
</style>